<!DOCTYPE html>
<html>
<head>
    <title>zkViewer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/index.js?v=1"></script>
    <script type="text/javascript">
    </script>
</head>
<body class="easyui-layout">
    <div id="northPanel" data-options="region:'north',collapsible:false" title="Server" style="height:100px;">
        <form id="server" style="height: 100%;width: 100%">
            <table width="100%" style="height: 100%" valign="middle">
                <tr>
                    <td width="18%">
                    </td>
                    <td width="82%" style="text-align: left;" valign="middle">
                        Server: &nbsp;<input class="easyui-textbox" type="text" name="host" id="host" style="width: 250px;"></input>
                        &nbsp;
                        Port: &nbsp;<input class="easyui-textbox" type="text" name="port" id="ports" value="2181" style="width: 60px;"></input>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="connect()" style="margin-left: 30px">Connect</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <div id="westPanel" data-options="region:'west',split:true" title="Nodes" style="width:22%;height: 500px">
        <ul id="nodes" class="easyui-tree" url="nodes">
        </ul>
    </div>
    <div id="eastPanel" data-options="region:'center',split:false" title="Details" style="width:78%;height: 500px">
        <div class="easyui-tabs" data-options="border:false" style="width:100%;height:480px">
            <div title="Node Data" style="padding:10px;width: 100%">
                <form id="nodeData" style="width: 100%">
                    <input class="easyui-textbox" id="nodeDataValue" name="data" data-options="multiline:true" style="height:360px;width: 100%"></input>
                    <table style="width: 100%;padding-top: 4px">
                        <tr>
                            <td width="78%">
                            </td>
                            <td>
                                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="updateData()" style="margin-left: 30px">Submit</a>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div title="Node Metadata" style="padding:10px">
                <form id="metadata">
                    <table cellpadding="2">
                        <tr>
                            <td>ACL Version:</td>
                            <td><input class="easyui-textbox" type="text" name="aclVersion" editable="false"></input></td>
                        </tr>
                        <tr>
                            <td>Creation Time:</td>
                            <td><input class="easyui-textbox" type="text" name="createTime" editable="false"></input></td>
                        </tr>
                        <tr>
                            <td>Children Version:</td>
                            <td><input class="easyui-textbox" type="text" name="childrenVersion" editable="false"></input></td>
                        </tr>
                        <tr>
                            <td>Creation ID:</td>
                            <td><input class="easyui-textbox" type="text" name="creationId" editable="false"></input></td>
                        </tr>
                        <tr>
                            <td>Data Length:</td>
                            <td><input class="easyui-textbox" type="text" name="dataLength" editable="false"></input></td>
                        </tr>
                        <tr>
                            <td>Ephemeral Owner:</td>
                            <td><input class="easyui-textbox" type="text" name="ephemeralOwner" editable="false"></input></td>
                        </tr>
                        <tr>
                            <td>Last Modify Time:</td>
                            <td><input class="easyui-textbox" type="text" name="lastModifyTime" editable="false"></input></td>
                        </tr>
                        <tr>
                            <td>Modified ID:</td>
                            <td><input class="easyui-textbox" type="text" name="modifyId" editable="false"></input></td>
                        </tr>
                        <tr>
                            <td>Number Of Children:</td>
                            <td><input class="easyui-textbox" type="text" name="numOfChildren" editable="false"></input></td>
                        </tr>
                        <tr>
                            <td>Node ID:</td>
                            <td><input class="easyui-textbox" type="text" name="nodeId" editable="false"></input></td>
                        </tr>
                        <tr>
                            <td>Data Version:</td>
                            <td><input class="easyui-textbox" type="text" name="dataVersion" editable="false"></input></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div title="Node ACLs" style="padding:10px">
                <table cellpadding="2" id="aclsTab">
                    <tr>
                        <td>Schema:</td>
                        <td><input class="easyui-textbox" type="text" editable="false"></input></td>
                    </tr>
                    <tr>
                        <td>ID:</td>
                        <td><input class="easyui-textbox" type="text" editable="false"></input></td>
                    </tr>
                    <tr>
                        <td>Permissions:</td>
                        <td><input class="easyui-textbox" type="text" editable="false"></input></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div id="southPanel" data-options="region:'south',collapsible:false,border:false"  style="height:40px;">
        <div style="width: 100%;vertical-align: middle;line-height: 40px;text-align: center;">
            <a href="https://gitee.com/skyz/zk-viewer" target="_blank">https://gitee.com/skyz/zk-viewer</a>&nbsp;/&nbsp;<a href="https://github.com/skyzzzzzzz/zk-viewer" target="_blank">https://github.com/skyzzzzzzz/zk-viewer</a>
        </div>
    </div>
    <div id="treeMenu" class="easyui-menu" style="width:120px;">
        <div iconCls="icon-add" onclick="javascript:showAddNodeDlg()">Add</div>
        <div iconCls="icon-remove" onclick="javascript:remove()">Remove</div>
        <div class="menu-sep"></div>
        <div iconCls="icon-search" onclick="javascript:showFullpath()">Full path</div>
        <div iconCls="icon-reload" onclick="javascript:refresh()">Refresh</div>
    </div>
    <div id="addNodeDlg" class="easyui-dialog" title="Add Node" style="width:400px;height:200px;"
         data-options="iconCls:'icon-save',resizable:true,modal:true,buttons:'#addNodeDlgBtns'" closed="true">
        <table cellpadding="5" style="padding-top: 10px">
            <tr>
                <td width="18%"></td>
                <td>Node Name:</td>
                <td><input class="easyui-textbox" type="text" id="nodeName" editable="true" style="width: 155px"></input></td>
            </tr>
            <tr>
                <td></td>
                <td>Node Value:</td>
                <td><input class="easyui-textbox" type="text" id="nodeValue" editable="true" style="width: 155px"></input></td>
            </tr>
            <tr>
                <td></td>
                <td>CreateMode:</td>
                <td>
                    <select class="easyui-combobox" data-options="panelHeight:140" id="createModel" name="createModel" style="width:100%">
                        <option value="PERSISTENT" selected>PERSISTENT</option>
                        <option value="PERSISTENT_SEQUENTIAL">PERSISTENT_SEQUENTIAL</option>
                        <option value="EPHEMERAL">EPHEMERAL</option>
                        <option value="EPHEMERAL_SEQUENTIAL">EPHEMERAL_SEQUENTIAL</option>
                    </select>
                </td>
            </tr>
        </table>
    </div>
    <div id="addNodeDlgBtns">
        <a href="#" class="easyui-linkbutton" onclick="addNode()">Submit</a>
        <a href="#" class="easyui-linkbutton" onclick="$('#addNodeDlg').dialog('close')">Close</a>
    </div>
    <div id="fullpathDlg" class="easyui-dialog" title="Full path" style="width:400px;height:200px;"
         data-options="iconCls:'icon-save',resizable:true,modal:true" closed="true">
        <form id="fullpathForm">
            <input class="easyui-textbox" name="fullpath" data-options="multiline:true" style="height:200px;width: 100%"></input>
        </form>
    </div>
</body>
</html>